{% extends "base.html" %}

{% block title %}关于我们 - SteHub{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h2 class="mb-0"><i class="fas fa-info-circle me-2"></i>关于 SteHub</h2>
            </div>
            <div class="card-body">
                <div class="text-center mb-4">
                    <i class="fas fa-graduation-cap fa-5x text-primary mb-3"></i>
                    <h3>SteHub 学生交流平台</h3>
                    <p class="lead text-muted">连接每一个热爱学习的学生</p>
                </div>

                <h4>🎯 项目简介</h4>
                <p>SteHub 是一个专为学生设计的免费在线交流平台，集论坛、实时聊天、资源分享于一体。平台采用网页端+桌面通知助手的双模式架构，支持本地运行和云端部署两种模式。</p>

                <h4>✨ 核心特色</h4>
                <div class="row">
                    <div class="col-md-6">
                        <ul class="list-unstyled">
                            <li><i class="fas fa-globe text-primary me-2"></i>全平台访问</li>
                            <li><i class="fas fa-desktop text-primary me-2"></i>桌面通知</li>
                            <li><i class="fas fa-bolt text-primary me-2"></i>实时交流</li>
                            <li><i class="fas fa-shield-alt text-primary me-2"></i>安全可靠</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <ul class="list-unstyled">
                            <li><i class="fas fa-database text-primary me-2"></i>双模式存储</li>
                            <li><i class="fas fa-rocket text-primary me-2"></i>灵活部署</li>
                            <li><i class="fas fa-users text-primary me-2"></i>社区驱动</li>
                            <li><i class="fas fa-heart text-primary me-2"></i>完全免费</li>
                        </ul>
                    </div>
                </div>

                <h4>🚀 技术架构</h4>
                <div class="row">
                    <div class="col-md-6">
                        <h6>前端技术栈</h6>
                        <ul>
                            <li>HTML5 + CSS3 + JavaScript (ES6+)</li>
                            <li>Bootstrap 5 - 响应式UI框架</li>
                            <li>Socket.IO Client - 实时通信</li>
                            <li>Electron - 桌面应用封装</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>后端技术栈</h6>
                        <ul>
                            <li>Python Flask - Web应用框架</li>
                            <li>Flask-SocketIO - WebSocket实时通信</li>
                            <li>SQLAlchemy - ORM数据库操作</li>
                            <li>JWT + bcrypt - 用户认证和安全</li>
                        </ul>
                    </div>
                </div>

                <h4>🎓 发展愿景</h4>
                <p>我们致力于打造一个真正属于学生的学习交流社区，让知识分享更简单，让学习成长更精彩！</p>

                <div class="alert alert-info mt-4">
                    <h6><i class="fas fa-heart me-2"></i>社区文化</h6>
                    <ul class="mb-0">
                        <li><strong>互助共享</strong> - 知识因分享而更有价值</li>
                        <li><strong>尊重包容</strong> - 欢迎不同背景的学生</li>
                        <li><strong>积极向上</strong> - 营造正能量学习氛围</li>
                        <li><strong>诚信交流</strong> - 真实、友善的互动环境</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}